import SideMenu from "@/components/sideMenu/SideMenu"
import { Layout } from "antd"
import { Redirect, Route, Switch } from "react-router-dom"
import NoPermission from "../noPermission/NoPermission"
import UserPanel from "../userPanel"
import DataPanel from "../dataPanel"
import UserCenter from "../userCenter"
import Header from "@/components/header/Header"
import "./index.scss"
import AuthRoute from "@/components/AuthRoute"

const { Content } = Layout

const Home: React.FC = () => {
  return (
    <Layout className="sandBox">
      <SideMenu />
      <Layout className="site-layout">
        <Header />

        <Content
          className="site-layout-background"
          style={{
            boxSizing: "border-box",
            borderTop: "1px solid #f0f0f0",
            padding: 30,
            minHeight: 280,
            overflow: "auto",
          }}
        >
          <Switch>
            <Route
              path={"/home/data-panel"}
              render={(props) => (
                <AuthRoute {...props}>
                  <DataPanel />
                </AuthRoute>
              )}
            />
            <Route
              path={"/home/user-panel"}
              render={(props) => (
                <AuthRoute {...props}>
                  <UserPanel />
                </AuthRoute>
              )}
            />
            <Route
              path={"/home/user-center"}
              render={(props) => (
                <AuthRoute {...props}>
                  <UserCenter />
                </AuthRoute>
              )}
            />

            {/* 重定向 */}
            <Redirect path="/home" to={"/home/data-panel"} exact />
            {/* 403页面 */}
            <Route path={"*"} render={() => <NoPermission />} />
          </Switch>
        </Content>
      </Layout>
    </Layout>
  )
}

export default Home
